<template>
<view class="" >
<u-sticky bgColor="#52bbaa"  >
	<u-tabs :activeStyle="{
        color: '#fff',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" inactiveStyle="color:#fff;"  :list="list1" ref="uTabs" :current="current" @change="tabsChange"></u-tabs>
</u-sticky>
<view><u-notice-bar :text="text1" color="#fff" bgColor="#52bbaa"></u-notice-bar></view>
<view class="product-list">
	
<swiper :current="swiperCurrent" @change="transition" style="height: 1500rpx;">
	<swiper-item class="swiper-item"  v-for="(item, index) in tabs" :key="index">
		<scroll-view scroll-y style="height: 1500rpx;width: 100%;" @scrolltolower="onreachBottom">
		<view class="orderList flex" v-for="(list,i) in item.list" :key="list.order_no" >
			<view class="flex orderDesc">
				<view>
					<u--image width="150rpx" height="150rpx" :src="list.image"></u--image>
				</view>
				<view class="orderTitle">
					<view>{{list.title}}</view>
					<view>{{list.order_no}}</view>
					<view>{{list.createtime}}</view>
				</view>
				<view class="status_text">{{list.status_text}}</view>
			</view>
			<view class="flex opera">
				<view class="operaBtn"  :data-id="list.id" :data-order-no="list.order_no"  v-if="list.order_status == 5" @click="cancelOrder">取消</view>
			</view>
		</view>
		
		<u-empty v-if="item.list.length == 0" text="您还没有出行订单">
		</u-empty>
		</scroll-view>
	</swiper-item>
</swiper>

<u-modal :show="show" :showCancelButton="true" :title="title" @confirm="cancelOrderSuccess" @cancel="cancelOrderFalse" :content='content'></u-modal>
</view>
</view>
</template>
<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				text1:'请通过《我的-客服中心》联系客服确认行程',
				title:'确定取消操作吗',
				show:false,
				content:'',
				orderId: 0,
				swiperCurrent: 0,
				current: 0,
				page:0,
				tabs:[
					{list:[]},
					{list:[]},
					{list:[]},
					{list:[]},
					{list:[]},
					{list:[]},
				],
				list1: [{
				name: '全部',
				}, {
				name: '待确定',
				}, {
				name: '待出行'
				},
				{
					name: '出行中'
				},
				{
				name: '已完成'
				},
				{name:'已取消'}
				]
			}
		},
		watch:{
			'tabs.list':{
				deep:true,//true为进行深度监听,false为不进行深度监听
				handler(newVal){
					console.log(newVal);
				}
			}
		},

		methods:{
			// tabs通知swiper切换
			tabsChange(e) {
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current;
				this.page = 0;
				this.getOrderList()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.page++
				this.getOrderList(1);
			},
			getOrderList(type){
				http.POST('order/list',{current:this.swiperCurrent,page:this.page}).then(res=>{
					if(type == 1){
						this.tabs[this.swiperCurrent].list.push(...res.data)
					}else{
						this.tabs[this.swiperCurrent].list = res.data
					}
				})
			},
			cancelOrder(e){
				console.log(e.currentTarget.dataset)
				let id = e.currentTarget.dataset.id;
				let order_no = e.currentTarget.dataset.orderNo;
				this.orderId = id;
				this.show = true;
				this.content = '确定取消订单号为:'+order_no+'的订单吗?'
			},
			cancelOrderSuccess(){
				this.show = false;
				http.POST('order/cancelOrder',{id:this.orderId}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							title:'操作成功',
							'icon':'none',
						})
						this.getOrderList()
					}else{
						uni.showToast({
							title:res.msg,
							'icon':'none',
						})
					}
					
				})
			},
			cancelOrderFalse(){
				this.show = false;
			}
		},
		onLoad() {
			this.getOrderList()
		}

	}
</script>

<style>
	.product-list {
		padding: 0 20rpx;
	}
	.flex{display: flex;}
	.content { background-color: aliceblue;}
	.orderList { padding:10rpx; margin-top: 20rpx; background-color: #fff; flex-direction: column; border:1px solid #eee; border-radius: 20rpx;}
	.orderTitle {
		display: flex;
		flex-direction: column;
		line-height: 45rpx;
		flex-grow: 2;
		margin-left: 20rpx;
		
	}
	.orderDesc { align-items: center;}
	.orderStatus { width: 140rpx; font-size: 22rpx; margin-left:10rpx; border-radius: 20rpx; height: 50rpx; line-height: 50rpx; border: 1px solid aqua; color: aqua; text-align: center;}
	.opera { justify-content: flex-end; padding: 10rpx 30rpx;}
	.operaBtn {
		background-color: red;
		padding: 10rpx;
		margin-left: 20rpx;
		color: #fff;
		border-radius: 20rpx;
	}
	.orderSuccess{
		border-color: skyblue;
		color: skyblue;
	}
	.orderCancel{
		border-color: darkgrey;
		color: darkgrey;
	}
	.orderGoing{
		border-color: aquamarine;
			color: aquamarine;
	}
	.status_text {
		font-size: 20rpx;
		padding: 10rpx;
		border: 1rpx solid #5cb9a4;
		border-radius: 30rpx;
		min-width: 60rpx;
	}
</style>
